<template>
  <div class="line_box" ref="echartDom"></div>
</template>

<script setup lang="ts">
import { inject, ref, shallowRef, onMounted, onUnmounted, defineProps, watchEffect } from "vue";
import { pxToRem } from "@/utils/index";

// 接收参数
const props = defineProps({
  housingSupplyStatsData: {
    type: Object,
    default: () => {},
  },
  type: {
    type: Number,
    default: 0,
  },
});

// 数据定义
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
const data = ref();
const type = ref();
type.value = props.type ? props.type : 0;
data.value = {
  series: props.housingSupplyStatsData.result,
};
const maxValues = {
  firstItemMax: 0,
  secondItemMax: 0,
  thirdItemMax: 0,
  fourItemMax: 0,
};
var itemStyle = {
  opacity: 0.8,
};
var sizeFunction = function (x: number) {
  x = Math.max(0, Math.min(x, maxValues.thirdItemMax));
  // 将限制后的值映射到合适的圆的大小范围（例如100到900之间）
  var y = Math.sqrt(x / maxValues.thirdItemMax) + 0.1;
  return y * 80 + 0.1; // 返回100到900之间的圆的大小值
};
// Schema:
var schema = [
  { index: 4, text: "租售比", unit: "%" },
  { index: 5, text: "租售饱和度", unit: "%" },
  { index: 0, text: "出租面积", unit: "（万㎡）" },
  { index: 6, text: "出租面积同比上年", unit: "%" },
  { index: 7, text: "出租面积环比", unit: "%" },
  { index: 1, text: "出租套数", unit: "套" },
  { index: 8, text: "出租套数同比上年", unit: "%" },
  { index: 9, text: "出租套数环比", unit: "%" },
];
// echarts初始化渲染
const getEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    const option: { baseOption: any; options: any[] } = {
      baseOption: {
        timeline: {
          show: false,
        },
        tooltip: {
          axisPointer: {
            type: "line",
            lineStyle: {
              color: "rgba(40,252,255,0.6)",
              shadowBlur: pxToRem(10),
              shadowColor: "rgba(0, 0, 0, 0.9)",
            },
          },
          textStyle: {
            color: "#fff",
            fontSize: pxToRem(18),
          },
          backgroundColor: "rgba(8, 64, 132, 0.9)",
          formatter: function (obj: { value: any }) {
            var value = obj.value;
            return (
              schema[0].text +
              "：" +
              value[4] +
              schema[0].unit +
              "<br>" +
              schema[1].text +
              "：" +
              value[5] +
              schema[1].unit +
              "<br>" +
              schema[2].text +
              "：" +
              value[0] +
              schema[2].unit +
              "<br>" +
              schema[3].text +
              "：" +
              value[6] +
              schema[3].unit +
              "<br>" +
              schema[4].text +
              "：" +
              value[7] +
              schema[4].unit +
              "<br>" +
              schema[5].text +
              "：" +
              value[1] +
              schema[5].unit +
              "<br>" +
              schema[6].text +
              "：" +
              value[8] +
              schema[6].unit +
              "<br>" +
              schema[7].text +
              "：" +
              value[9] +
              schema[7].unit
            );
          },
        },
        grid: {
          left: "0",
          right: "3%",
          bottom: "4%",
          top: "25%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          name: "出租面积",
          nameLocation: "center",
          nameGap: pxToRem(-20), // 设置名称与轴线之间的距离
          nameTextStyle: {
            padding: props.type == 1 ? [0, 0, 0, pxToRem(1000)] : [0, 0, 0, pxToRem(470)],
            fontSize: pxToRem(12),
          },
          boundaryGap: "20%",
          max: maxValues.firstItemMax + 1000,
          min: 0.01,
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#FFFFFF",
              fontSize: pxToRem(12),
            },
          },
        },
        yAxis: {
          type: "value",
          max: maxValues.secondItemMax,
          min: 0.01,
          nameTextStyle: {
            color: "#959699",
            fontSize: pxToRem(12),
          },
          axisLabel: {
            formatter: "{value}",
            color: "#959699",
            fontSize: pxToRem(12),
          },
          name: "出租套数",
          splitLine: {
            show: true,
            lineStyle: {
              color: "#31679C",
              type: "dashed",
            },
          },
          axisTick: {
            show: false, // 设置为false即可隐藏Y轴刻度线
          },
          axisLine: {
            show: false, // 设置为false即可隐藏Y轴的线
          },
        },
        visualMap: {
          top: pxToRem(5),
          orient: "horizontal", // 设置为水平展示
          min: 0,
          max: maxValues.fourItemMax,
          itemWidth: pxToRem(13),
          itemHeight: pxToRem(111), // 调整高度值
          inRange: {
            color: ["#2586EE", "#E55151"],
          },
          textStyle: {
            color: "transparent",
          },
          dimension: 5, // 与数组中第六项数据关联
        },
        title: {
          text: "租赁饱和度",
          left: pxToRem(120),
          top: pxToRem(7),
          textStyle: {
            color: "#9E9E9E",
            fontSize: pxToRem(12),
          },
        },
        series: [],
      },
      options: [],
    };
    for (let n = 0; n < data.value.series.length; n++) {
      option.options.push({
        series: {
          type: "scatter",
          itemStyle: itemStyle,
          data: data.value.series[n],
          symbolSize: (val: number[]) => sizeFunction(val[4]),
          label: {
            show: true,
            position: "inside",
            formatter: function (params: any) {
              return params.data[2]; // 根据数据点的第一个元素显示城市名称
            },
            fontSize: pxToRem(12), // 设置文字大小为12
            color: "#fff", // 设置文字颜色为白色
          },
        },
      });
    }
    myChart.value.setOption(option);
  }
};

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  props.housingSupplyStatsData;
  data.value = {
    series: props.housingSupplyStatsData.result,
  };
  maxValues.firstItemMax = 0;
  maxValues.secondItemMax = 0;
  maxValues.thirdItemMax = 0;
  maxValues.fourItemMax = 0;
  // 取数组最大值
  data.value.series.forEach((series: any[]) => {
    series.forEach((item) => {
      maxValues.firstItemMax = Math.max(maxValues.firstItemMax, item[0]);
      maxValues.secondItemMax = Math.max(maxValues.secondItemMax, item[1]);
      maxValues.thirdItemMax = Math.max(maxValues.thirdItemMax, item[4]);
      maxValues.fourItemMax = Math.max(maxValues.fourItemMax, item[5]);
    });
  });
  getEchart();
};

watchEffect(() => {
  updateChart();
});

onMounted(() => {
  getEchart();
  window.addEventListener("resize", updateChart);
});

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
});
</script>
